<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <slot name="header"></slot>
    <div class="upload-wrap">
      <div class="upload-input">
        <input
          type="file"
          ref="input"
          class="upload-file-input"
          name="upload-file"
          id="orderUpload"
          accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          @change="handleUploadChange"
        />
        <el-button type="primary" class="pull-left" @click="handleUploadSelect">
          <i class="fa fa-folder-open-o"></i>
          {{ btnText }}
        </el-button>
        <div class="upload-info">
          <span v-if="!uploadFile" style="display: inline-block; margin-top: 8px">未选择文件</span>
          <span v-else>
            文件：{{ uploadFile.name }}
            <br />
            大小：{{ uploadSize }}
          </span>
        </div>
      </div>
      <p class="pull-right" v-show="excelTemplate">
        <a :href="excelTemplate" class="btn btn-text">
          <i class="fa fa-file-excel-o"></i>
          {{ templateText }}
        </a>
      </p>
      <div class="upload-hint">
        <slot></slot>
        <ul
          class="list-unstyled"
          style="color: #999; margin-bottom: 0"
          v-if="hintShow && !$slots.default"
        >
          <li>1、请按模板文件格式填写。</li>
          <li>2、只支持上传 .xls .xlsx 文件。</li>
        </ul>
      </div>
    </div>
    <div class="text-right">
      <el-button :plain="true" type="warning" @click="onDissmis">取消</el-button>
      <el-button type="primary" @click="importOrder" :disabled="!uploadFile">
        <i class="fa fa-fw fa-sign-in"></i>
        导 入
      </el-button>
    </div>
    <slot name="footer"></slot>
  </el-dialog>
</template>

<script>
import { excelRead } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    title: {
      type: String,
      default: '导入',
    },
    visible: Boolean,
    excelTemplate: String,
    templateText: {
      type: String,
      default: '下载模板文件',
    },
    btnText: {
      type: String,
      default: '上传文件',
    },
    hintShow: {
      type: Boolean,
      default: true,
    },
    autoClose: {
      // 导入成功自动关闭
      type: Boolean,
      default: true,
    },
    column: {
      type: Number,
      default: 0,
    },
    row: {
      type: Number,
      default: 0,
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      uploadFile: null,
      uploadSize: '',
      uploadObj: {},
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {
    reset() {
      this.uploadObj.value = ''
      this.uploadFile = null
      this.uploadSize = ''
    },

    handleUploadChange(e) {
      this.uploadObj = e.target
      var files = e.target.files || e.dataTransfer.files
      if (!files.length) {
        this.$message.error('读取文件错误，请重试！')
      } else {
        this.uploadFile = files[0]
        this.uploadSize = this.getFileSize(this.uploadFile.size)
      }
    },

    handleUploadSelect() {
      const inputEl = this.$refs.input
      inputEl.value = null
      inputEl.click()
    },

    importOrder() {
      if (!this.uploadFile) {
        return this.$message.error('读取文件错误，请重试！')
      }
      excelRead(
        this.uploadFile,
        [this.options],
        [
          {
            json: true, // default is true
            start: { c: this.column, r: this.row },
          },
        ]
      ).then(res => {
        if (!res || !res.length) return this.onsuccess([])
        this.onsuccess(res[0].data)
      })
    },
    onsuccess(data) {
      this.$emit('success', data)
    },

    getFileSize(size) {
      var unit = ['B', 'KB', 'MB', 'GB']
      var index = 0
      while (size >= 1024 && index + 1 < unit.length) {
        index++
        size = size / 1024
      }
      return ~~(size * 100) / 100 + unit[index]
    },

    handleClose() {
      this.onDissmis()
    },

    onDissmis() {
      this.reset()
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style scoped>
.upload-wrap {
  overflow: hidden;
  margin-bottom: 10px;
  line-height: initial;
}
.upload-input {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-bottom: 10px;
  *display: inline;
  *zoom: 1;
}
input.upload-file-input {
  display: none;
}
.upload-info {
  float: left;
  margin-left: 10px;
  margin-top: 2px;
  font-size: 12px;
  color: #999;
}
.upload-hint {
  padding: 5px;
  margin: 10px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
</style>
